<template>
	<view class="container">
		<uv-sticky offsetTop="-2" bgColor="#FFFFFF">
		<view>
			<view class="search-v">
				<view @click="toSearch()"
					style="display: flex;    width: 100%;    border: 1px solid #e4e4e4;    border-radius: 10rpx;padding-left: 20rpx;">
					<text class="cell-icon yticon icon-sousuo"
						style="height: 68rpx;line-height: 68rpx;float: left;width: 40rpx;"></text>
					<!-- <input class="search-input"  placeholder="请输入搜索关键词"/> -->
					<view class="search-input">请输入感兴趣的内容、夜校名</view>
				</view>
				<!-- 	<view class="filter" @click="clickFilter()"><text class="cell-icon yticon icon-filter"
						:class="shaiXuan"></text></view> -->
			</view>
			<shai-xuan v-if="show_mask" class="shaixuan"></shai-xuan>
		</view>
		</uv-sticky>
		<view class="bottom-box">
			<view class="swiper-list">
				<uv-swiper :list="swiper_list" height="200" @click="toPlay3" keyName="discover" indicator
					indicatorMode="line" circular showTitle
					:title-style="{color:'white',textAlign: 'left',paddingBottom:'20rpx',paddingLeft:'40rpx',background:'none',bottom:'50rpx'}">
				</uv-swiper>
				<!-- <uv-swiper :list="swiper_list" height="200" @click="toPlay" keyName="discover" indicator
					indicatorMode="line" circular showTitle
					:title-style="{color:'white',textAlign: 'left',paddingBottom:'20rpx',paddingLeft:'40rpx',background:'none',bottom:'50rpx'}">
				</uv-swiper> -->
				<!-- <swiper  indicator-dots indicator-color="rgba(128,128,128,1)" indicator-active-color="#FFFFFF" @change="newChange">
					<swiper-item v-for="(item,index) in swiper_list" :key="index" @click="toPlay2(item)">
						<text style="position: absolute;bottom: 40rpx;left: 40rpx;color:#FFFFFF">{{item.title}}</text>
						<image style="width: 100%;height: 100%" v-if="item.discover!=''" :src="item.discover" mode="aspectFill"></image>
						<video style="width: 100%;height: 100%" v-else :id="'myVideo_' + item.id" @play="playInfo" :src="item.video_url" :autoplay="false" :controls="false" :show-center-play-btn="false"></video>
					</swiper-item>
				</swiper> -->
				<!-- <view class="rec-tag">互动视频</view> -->
				<!-- <text class="cell-icon yticon icon-player player_btn"></text> -->
			</view>
		</view>
		<uv-sticky offsetTop="48" bgColor="#FFFFFF">
		<view class="flex-container">
			<view class="left-aligned">
				<view>
					<picker mode="date" fields="month" @change="bindDateChange">
						<view class="uni-input" style="float: left;">{{year}}年{{selectMonth}}月</view>
						<text class="cell-icon yticon icon-xia"></text>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="month_c">
			<scroll-view :scroll-with-animation="show_scrollbar" scroll-x style="white-space: nowrap;"
				:scroll-left="s_left">
				<view v-for="(item, index) in month_list" :key="index" class="course_tab2"
					@click="clickTabCourse(item.val,index)" :class="{current: secondCurrentIndex === index}">
					<view class="course_t">{{item.title}}</view>
					<view class="course_c">{{item.content}}</view>
				</view>
			</scroll-view>
		</view>
		</uv-sticky>
		
		<view class="list-content"  :style="{'background':hasRoll}">
			<view v-if="loaded2&&course_list.length==0" class="empty_data">暂无数据</view>
			<!-- <scroll-view v-else scroll-y @scrolltolower="loadMonthCourse" style="height: 1080rpx;"> -->
			<view v-else >
				<view class="list-item" v-for="(item, index) in course_list" :key="index"
					@click="toDetailText(item.id)">
					<view class="list-img">
						<view class="status-tag" :style="{background: item.background}">{{item.status_tag}}</view>
						<image :src="item.discover"></image>
					</view>
					<view class="list-title">
						<view class="list-title-name">{{item.name}}</view>
						<view class="list-detail">
							<view style="flex: 1;">共{{item.course_section_info_count}}节</view>
							<view class="pad-r22">距您{{item.distance}}</view>
						</view>
						<view class="list-date">开课日期:{{item.course_time}}</view>
						<view class="list-op">
							<view class="font-w600">{{item.price}}</view>
							<view class="sign-coin-detail">
								签到最高可领{{item.score}}积分</view>
						</view>
						<view v-if="item.is_cancel==1" style="color: #FA6401;font-size: 24rpx;margin-top: 10rpx;">{{item.cancel_reason}}</view>
					</view>
				</view>
				</view>
			<!-- </scroll-view> -->
		</view>
	</view>
</template>
<!-- 自定义一些组件测试 -->
<script>
	import Search from "@/components/search"
	import ShaiXuan from '@/components/shaixuan'
	import Api from '@/common/api'
	export default {
		components: {
			Search,
			ShaiXuan
		},
		data() {
			return {
				show_scrollbar: false,
				index: 0,
				shaixuan: '',
				page2: 1,
				size2: 4,
				show_mask: false,
				s_opacity: 1,
				more_data_month: true,
				tabCurrentIndex: 0,
				month_list: [],
				secondCurrentIndex: 0,
				course_list: [],
				hasRoll: '',
				selectMonth: 0,
				array: [],
				loaded2: false,
				lat: '',
				lng: '',
				year: '',
				swiper_list: [],
				s_left: 0,
				videoList:[],
				currentVideoId:''
			}
		},

		onLoad() {
			let loc = uni.getStorageSync('loc');
			if (loc != '') {
				this.lat = loc.lat;
				this.lng = loc.lng;
			}
			this.initDateData();
			this.getSwiperList();
		},
		onShow() {

		},
		onReachBottom(){
			this.loadMonthCourse()
		},
		
		beforeCreate() {},
		beforeDestroy() {},
		methods: {
			bindDateChange(e) {

				let temp = e.detail.value.split('-');
				this.year = temp[0];
				this.selectMonth = temp[1];
				this.recaculateLeft();
				// 以下是复制的
				this.course_list = [];
				this.hasRoll = '#FFFFFF';

				this.more_data_month = true;
				this.page2 = 1;
				this.loadData1();
			},
			toPlay(e) {
				uni.navigateTo({
					url: '/pages/course/detail?id=' + this.swiper_list[e].id + "&t=1"
				})
			},
			toPlay2(item) {
				if(item.video_url==''){
					return;
				}
				uni.navigateTo({
					url: '/pages/course/detail?id=' + item.id + "&t=1"
				})
			},
			toPlay3(e){
				uni.navigateTo({
					url: this.swiper_list[e].jump_url
				})
			},
			recaculateLeft() {
				this.s_left = 119 * (this.selectMonth-1);
			},
			initDateData() {
				let now = new Date();
				this.year = now.getFullYear();
				this.selectMonth = now.getMonth() + 1; // 月份从0开始，所以要加1
				
				this.loadData1();
				
			},
			// 加载月或周统计列表
			async loadData1() {

				let params = {
					t: 'm',
					mon: this.selectMonth,
					y: this.year
				};
				// console.log(params.t,'值',params.mon)
				let data = await Api.apiCall('get', Api.apiName.month_or_week, params);
				if (!data) { //出错时
					return;
				}
				this.month_list = data.data;
				let k = this.month_list.findIndex(obj => obj.val == this.selectMonth);
				this.secondCurrentIndex = k;
				this.recaculateLeft();
				this.loadMonthCourse()
			},


			clickFilter() {
				this.shaixuan = this.shaixuan == 'sx' ? '' : 'sx';
				this.show_mask = !this.show_mask;
				this.s_opacity = this.show_mask ? 0.7 : 1;
				console.log(this.shaixuan)
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/public/search?lat=' + this.lat + '&lng=' + this.lng
				})
			},
			async getSwiperList() {

				let params = {
					page: 1,
					size: 3,
				}
				let data = await Api.apiCall('get', Api.apiName.swiper_list, params, true);
				if (!data || data.data.length == 0) {
					return;
				}
				this.swiper_list = data.data;
				//第一条数据如果是视频则播放
				if(this.swiper_list.length>0&&this.swiper_list[0].video_url!=''){
					let obj=uni.createVideoContext('myVideo_'+this.swiper_list[0].id);
					this.videoList.push(obj);
					obj.play();
				}
				
				// if(this.swiper_list.length>0){
				// 	this.swiper_list.forEach((item,index)=>{
				// 		if(item.video_url!=''){
				// 			this.videoList.push(uni.createVideoContext('myVideo_'+item.id));
				// 		}
				// 	})
				// }
			},

			toDetailText(id) {
				// 可做页面跳转等
				// console.log("点击了：", id);
				uni.navigateTo({
					url: '/pages/course/detail_text?id=' + id
				})
			},

			// 加载列表数据
			async loadMonthCourse() {
				if (!this.more_data_month) {
					return; //没有数据不请求
				}
				this.loaded2 = false;
				let params = {
					page: this.page2,
					size: this.size2,
					t: this.tabCurrentIndex == 0 ? 'm' : 'w',
					mon: this.selectMonth,
					y: this.year,
					lat: this.lat,
					lng: this.lng
				};
				let data = await Api.apiCall('get', Api.apiName.course_date_list, params);
				if (!data || data.data.length == 0) { //出错时
					this.loaded2 = true;
					this.more_data_month = false;
					return;
				}
				this.hasRoll = '#F6F6F6';
				setTimeout(() => {
					this.course_list = this.course_list.concat(data.data)
					// this.loaded2 = true;
					//判断是否还有数据， 有改为 more， 没有改为noMore
					if (data.data.length > 0 && data.data.length == this.size2) {
						this.page2++;
						
						// console.log('more')
					} else {
						this.more_data_month = false;
						// console.log('no more')
					}

				}, 600);
			},
			clickTabCourse(val, index) {
				this.page2 = 1;
				this.more_data_month = true;
				this.course_list = [];
				this.hasRoll = '#FFFFFF';
				if (this.tabCurrentIndex == 0) {
					this.selectMonth = val;
					this.secondCurrentIndex = index;
					this.index = index;
				}
				this.loadMonthCourse();
			},
			newChange(e){
				let index = e.detail.current;
				this.videoList.forEach((item)=>{
					item.stop();
					item=null;
				})
				this.videoList=[];
				let obj=uni.createVideoContext('myVideo_'+this.swiper_list[index].id);
				this.videoList.push(obj);
				obj.play();
				// console.log(this.videoList)
			},
			playInfo(e){
				this.currentVideoId=e.currentTarget.id;
			},
		},


	}
</script>

<style lang="scss" scoped>
	page {
		// background: #000000;

	}
	
	.search-v {
		padding: 0rpx 20rpx;
		// margin: 20rpx;
		height: 66rpx;
		// border-radius: 10rpx;
		// border: 1px solid #e4e4e4;
		display: flex;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.search-input {
		height: 64rpx;
		color: rgba(38, 38, 38, 0.5);
		// text-align: left;
		font-size: 14px;
		// transition: color 0.24s;
		// float: left;
		// width: 93%;
		line-height: 64rpx;
	}

	.container {
		// position: relative;
		// width: 100%;
		// height: 100%;
		display: flex;
		flex-direction: column;
	}

	.gundong {
		display: flex;
		overflow-x: scroll;
		height: 110rpx;
		white-space: nowrap;
	}

	.gundong::-webkit-scrollbar {
		display: none;
	}

	.month_c {
		font-weight: 100;
	}

	.month_c::-webkit-scrollbar {
		display: none !important;
	}

	.uni-searchbar__box {
		border: 1px solid rgba(204, 204, 204, 0.5);
	}
	.player_btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.bottom-box {
		flex: 1;
		width: 100%;
		// overflow-y: auto;
	}

	.filter {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.roll {
		// height: 100%;
		flex: 1;
		// overflow-y: auto;
	}

	.flex-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left-aligned,
	.right-aligned {
		display: flex;
		align-items: center;
		margin: 30rpx;
	}

	.month {
		margin-left: 20rpx;
	}

	.course_tab2 {
		width: 234rpx;
		background: #F6F6F6;
		border-radius: 8rpx;
		display: inline-block;
		flex-direction: column;
		justify-content: center;
		color: #FFFFFFF;
		font-size: 32rpx;
		margin: 0rpx 20rpx;
		padding: 13rpx 40rpx;

		&.current {
			background: #0191FF;
			color: #FFFFFF;
		}
	}

	.course_tab2::-webkit-scrollbar {
		display: none !important;
	}

	.course_t {
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
	}

	.course_c {
		margin-top: 10rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
	}

	.course_content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		color: #b1abab
	}

	.list-content {
		padding: 4rpx;
		margin-top: 32rpx;
	}

	.list-content::-webkit-scrollbar {
		display: none;
	}

	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 12rpx;
		border-radius: 20rpx;
	}

	.list-img {
		// padding: 20rpx;
		margin:20rpx;
		position: relative;
		width: 252rpx;
		height: 252rpx;
		image {
			width: 252rpx;
			height: 252rpx;
			border-radius: 20rpx;
		}
	}

	.status-tag {
		position: absolute;
		z-index: 2;
		bottom: 0rpx;
		background: rgba(0, 0, 0, 0.5);
		width: 252rpx;
		text-align: center;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		color: #FFFFFF;
	}

	.list-title {
		// margin-left: 20rpx;
		// margin-top: 30rpx;
		font-size: 28rpx;
		width: 100%;
		margin: 20rpx;
	}

	.list-title-name {
		font-size: 30rpx;
		font-weight: 600
	}

	.list-detail {
		display: flex;
		color: #999999;
		margin-top: 24rpx;
	}

	.list-date {
		color: #999999;
		margin-top: 24rpx
	}

	.list-op {
		margin-top: 30rpx;
		display: flex;
		color: #ff0000;
		align-items: center;
	}

	.pad-r22 {
		padding-right: 22rpx;
	}

	.font-w600 {
		font-weight: 600;
	}

	.sign-coin-detail {
		margin-left: 14rpx;
		font-size: 22rpx;
		border: 1px solid #ff0000;
		padding: 4rpx
	}

	.empty_data {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		opacity: 0.5;
		color: #999;
	}

	// image {
	// 	will-change: transform
	// }

	.swiper-list {
		// height: 448rpx;
		position: relative;
		margin: 0rpx 20rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.swiper {
		height: 100%;
	}

	.swiper-image {
		height: 448rpx;
		width: 100%;
		border-radius: 20rpx;
	}

	.rec-tag {
		position: absolute;
		right: 0px;
		width: 80px;
		top: 0px;
		background: #0191FF;
		padding: 10rpx;
		font-size: 24rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 20rpx;
	}

	.eye-name {
		font-size: 22rpx;
		color: #ccc
	}

	.indicator {
		display: flex;
		flex-direction: row;
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.shaixuan {
		background: #ffffff;
		position: fixed;
		z-index: 2;
		height: 740rpx;
		overflow: auto;
	}
</style>